<template>
    <div class="uploader-video">
        <div class="uploader-box clear">
            <div class="uploader-inner cover-uploader">
                <uploader class="uploader-example" 
                    :options="uploadOptions"
                    :autoStart="true" ref="uploaderVideo" 
                    :file-status-text="statusText" 
                    @files-submitted="fileSubmitVideo"
                    @file-removed="fileRemovedVideo"
                    @file-success="fileSuccessVideo"
                    @file-error="fileFailVideo">
                    <uploader-unsupport></uploader-unsupport>
                    <uploader-btn v-if="box_show" :directory="false" :attrs="attrsVideo" v-show="!video" :single="true">
                        <img src="/static/image/video.png">
                    </uploader-btn>
                    <uploader-list></uploader-list>
                    <div class="uploader-close-box" v-show="video">
                        <el-button class="uploader-close" @click="videoRemove" type="danger" icon="el-icon-close" circle></el-button>
                    </div>
                </uploader>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        uploadOptions: Object,
    },
    data() {
        return {
            box_show: true,
            statusText: {
                success: "上传成功",
                error: "上传出错",
                uploading: "正在上传...",
                paused: "暂停",
                waiting: "等待上传..."
            },
            video: null,
            attrsVideo: {
                accept: []
            },
            videoType: ['wmv', 'mpeg', 'mpg', 'avi', 'mov', 'ram', 'mp4', 'mkv'] // 视频格式
        };
    },
    created() {
    },
    methods: {
        //过滤文件格式
        fileSubmitVideo(files, fileList, event){
            for (var i = 0 ; i < fileList.length ; i++ ) {
                var ext = fileList[i].name.split('.').pop().toLocaleLowerCase();
                var file_type = fileList[i].fileType.toLocaleLowerCase();

                if (!this.videoType.includes(ext)) {
                    this.$message.warning('只支持上传 wmv/mpeg/mpg/avi/mov/ram/mp4/mkv 格式视频')
                    this.$refs.uploaderVideo.uploader.removeFile( fileList[i] );

                    return false;
                }
                if( fileList[i].size >   this.uploadLimitMax*1024*1024 && this.uploadLimitMax > 0  ){
                    this.$message.warning('只允许上传'+this.uploadLimitMax+'M以内的文件');
                    this.$refs.uploaderVideo.uploader.removeFile( fileList[i] );

                    return false;
                }
            }

            this.box_show = false;
        },
        fileRemovedVideo(file) {
            this.video = null;
            this.$emit('videoListen', this.video);
            this.box_show = true;
        },
        //上传成功的事件
        fileSuccessVideo(rootFile, file, message, chunk) {
            var mess = eval("(" + message + ")");
            mess = handleResponseData( mess );
            
            if (parseInt(mess.data.status) === 1) {
                this.video =  mess.data;
                this.$emit('videoListen', this.video);
            }

            this.box_show = true;
        },
        fileFailVideo(rootFile, file, message, chunk) {
            var mess = eval("(" + message + ")");
            if (parseInt(mess.error) === 401) {
                let callbcak = data => {
                    this.$refs.uploaderVideo.retry(file);
                };
                this.get_access_token(callbcak);
                
            }else {
                this.$message.error( mess.data.msg )
                setTimeout( () =>{
                    this.$refs.uploaderVideo.uploader.cancel();
                },1500)
            }

            this.box_show = true;
        },
        videoRemove() {
            this.$refs.uploaderVideo.uploader.cancel();
            this.video = null;
            this.$emit('videoListen', this.video);
        },
        reset() {
            this.$refs.uploaderVideo.uploader.cancel();
            this.video = null;
        }
    }
};
</script>

<style lang="scss">
.uploader-video {
    .uploader-box {
        .uploader-inner {
            display: inline-block;
            .uploader {
                width: 280px;
                height: 160px;
                border: 1px solid #ddd;
                border-radius: 4px;
                overflow: hidden;
                .uploader-btn {
                border: none;
                width: 100%;
                height: 100%;
                padding: 0;
                text-align: center;
                i {
                    font-size: 80px;
                    color: #9cd1ff;
                    margin-top: 45px;
                }
                img {
                    width: 100%;
                    height: 100%;
                }
                }
                .uploader-close-box {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.3);
                .uploader-close {
                    position: absolute;
                    top: 5px;
                    right: 5px;
                }
                }
                .uploader-list {
                position: relative;
                height: 100%;
                background: rgba(0, 0, 0, 0.4);
                .uploader-file {
                    position: relative;
                    width: 76%;
                    height: 100%;
                    margin: 0 auto;
                    border-bottom: none;
                    overflow: hidden;
                }
                .uploader-file-progress {
                    height: 10px;
                    top: 58px;
                    background: #3ce642;
                }
                .uploader-file-info {
                    height: 49px;
                    line-height: 49px;
                    margin-top: 60px;
                    font-size: 12px;
                    color: #fff;
                    z-index: 1;
                }
                .uploader-file-name,
                .uploader-file-meta {
                    display: none;
                }
                .uploader-file-size {
                    width: 40%;
                    text-indent: 0;
                }
                .uploader-file-status {
                    width: 48%;
                    text-indent: 0;
                }
                .uploader-file-actions {
                    .uploader-file-remove {
                    position: absolute;
                    width: 24px;
                    height: 24px;
                    line-height: 24px;
                    border-radius: 50%;
                    color: #fff;
                    text-align: center;
                    margin: 0;
                    background: #ef5c5c;
                    top: 50%;
                    transform: translateY(-50%);
                    &::before {
                        display: inline-block;
                        content: "x";
                    }
                    }
                }
                }
            }
            }
            .video-uploader {
            .uploaderList {
                z-index: 10;
            }
        }
    }
}
</style>
